<template>
  <div>
    <div class="flex-col page">
      <div class="justify-center group">
        <span class="text">Motion_software</span>
      </div>
      <div class="grid">
        <div
          class="flex-col items-center grid-item"
          v-for="(item, index) in datalist"
          :key="index"
        >
          <img
            :src="item.bolen ? item.icon.i1 : item.icon.i2"
            class="image_2"
          />
          <span
            class="text_1 text_active"
            :style="{ color: item.bolen ? 'gray' : 'black' }"
            >{{ item.title }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datalist: [
        {
          bolen: true,
          icon: {
            i1: require("../assets/img/kecheng-a.png"),
            i2: require("../assets/img/kecheng.png"),
          },
          title: "观看课程",
        },
        {
          bolen: false,
          icon: {
            i1: require("../assets/img/zipai-a.png"),
            i2: require("../assets/img/zipai.png"),
          },
          title: "观看自己",
        },
        {
          bolen: false,
          icon: {
            i1: require("../assets/img/shoucang-a.png"),
            i2: require("../assets/img/shoucang.png"),
          },
          title: "收藏课程",
        },
        {
          bolen: false,
          icon: {
            i1: require("../assets/img/shuju-a.png"),
            i2: require("../assets/img/shuju.png"),
          },
          title: "运动数据",
        },
      ],
      show: false,
    };
  },
  mounted() {
    document.addEventListener("keydown", this.showPopup);
    this.$store.commit('com','index')
    alert(this.$store.state.now_page)
  },
  destroyed() {
    document.removeEventListener("keydown", this.showPopup);
  },
  methods: {
    showPopup(e) {
      var key = window.event ? e.keyCode : e.which;
      if (this.show == true) {
        switch (key) {
        }
      } else {
        switch (key) {
          case 9:
            this.show = true;
            break;
          case 13:
            // this.$store.commit('add', nowPage)
            for (let i = 0; i < this.datalist.length; i++) {
              if (this.datalist[i].bolen == true) {
                if (i == 0) {
                  this.$router.push({
                    name: "curriculum",
                  });
                }
                if (i == 1) {
                  alert("请连接摄像头");
                }
                if (i == 2) {
                  this.$router.push({
                    name: "curriculum",
                  });
                }
                if (i == 3) {
                  this.$router.push({
                    name: "my_data",
                  });
                }
              }
            }
            break;
          case 37:
            for (let i = 0; i < this.datalist.length; i++) {
              if (this.datalist[i].bolen == true) {
                if (i != 0) {
                  this.datalist[i].bolen = false;
                  this.datalist[i - 1].bolen = true;
                } else {
                  alert("已经是第一个");
                }
                break;
              }
            }
            break;
          case 38:
            for (let i = 0; i < this.datalist.length; i++) {
              if (this.datalist[i].bolen == true) {
                if (i >= this.datalist.length - 2) {
                  this.datalist[i].bolen = false;
                  this.datalist[i - 2].bolen = true;
                } else {
                  alert("无法向上");
                }
                break;
              }
            }
            break;
          case 39:
            for (let i = 0; i < this.datalist.length; i++) {
              console.log(this.datalist.length);
              if (this.datalist[i].bolen == true) {
                if (i != this.datalist.length - 1) {
                  this.datalist[i].bolen = false;
                  this.datalist[i + 1].bolen = true;
                } else {
                  alert("已经是最后一个");
                }
                break;
              }
            }
            break;
          case 40:
            for (let i = 0; i < this.datalist.length; i++) {
              if (this.datalist[i].bolen == true) {
                if (i < this.datalist.length - 2) {
                  this.datalist[i].bolen = false;
                  this.datalist[i + 2].bolen = true;
                } else {
                  alert("无法向下");
                }
                break;
              }
            }
            break;
        }
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page {
  padding-top: 1.81rem;
  background-color: rgb(255, 255, 255);
  background-image: linear-gradient(
    165deg,
    rgb(222, 255, 201) 0%,
    rgb(163, 248, 255) 100%
  );
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
}
.group {
  padding: 0.5rem 0.94rem 0.56rem 1.25rem;
  color: rgb(0, 0, 0);
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 0.5rem;
  letter-spacing: 0.25rem;
  white-space: nowrap;
  position: relative;
}
.grid {
  margin: 3.16rem 0.72rem 0 0.66rem;
  height: 28.41rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.text {
  align-self: center;
}
.grid-item {
  padding: 1.47rem 0 1.44rem;
  color: rgb(0, 0, 0);
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 0.44rem;
  letter-spacing: 0.087rem;
  white-space: nowrap;
}
.image_2 {
  width: 1.03rem;
  height: 1.06rem;
}
.text_1 {
  margin-top: 1.28rem;
}

.text_active {
  color: gray;
}
</style>
